<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <button>红</button>
    <button>绿</button>
    <button>蓝</button>
    <button>黑</button>
    <button>粉</button>

    <!-- <script>
        var arr = ['red', 'green', 'blue', 'black', 'pink']
        var buttonList = document.getElementsByTagName('button')
        /* for (var i = 0; i < buttonList.length; i++) {
            buttonList[i].onclick = function () {
                var color = arr[i]
                console.log(color, i)
                document.body.style.backgroundColor = color
            }
        } */
        for (var i = 0; i < buttonList.length; i++) {
            // 自执行函数执行，形成一个私有的上下文
            (function (i) {
                /*
                 * EC(AN)
                 *  作用域链:<EC(AN), EC(G)>
                 *  形参赋值: 1=0
                 * 此上下文是不能被释放的
                 */
                // buttonList[0].onclick = AAAFFF000([[scope]]: EC(AN))
                buttonList[i].onclick = function () {
                    /*
                     * 私有上下文EC(EV)   
                     */
                    var color = arr[i]
                    console.log(color, i)
                    document.body.style.backgroundColor = color
                }
            })(i)
        }
    </script> -->
    <script>
        /* var arr = ['red', 'green', 'blue', 'black', 'pink']
        var buttonList = document.getElementsByTagName('button')
        for (var i = 0; i < buttonList.length; i++) {
            // 把自执行函数执行的返回值赋值给onclick
            buttonList[i].onclick = (function (i) {
                return function () {
                    var color = arr[i]
                    document.body.style.backgroundColor = color
                }
            })(i)
        } */
        let arr = ['red', 'green', 'blue', 'black', 'pink']
        let buttonList = document.getElementsByTagName('button')
        for (let i = 0; i < buttonList.length; i++) {
            // 把自执行函数执行的返回值赋值给onclick
            buttonList[i].onclick = function () {
                let color = arr[i]
                document.body.style.backgroundColor = color
            }
        }
    </script>
</body>

</html>